<template>
  <div class="app-container">
    <div style="margin:0 20px">
      <div class="filter-select">
        <el-row>
          <el-col :span="24" class="present-tabs">
            <el-tabs v-model="upActive" @tab-click="handleClickUp">
              <el-tab-pane v-if="level == 2 || level == 1" label="社区上报" name="0"></el-tab-pane>
              <el-tab-pane v-if="level == 0 || level == 1" label="街道上报" name="1"></el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="filter-container">
      <el-card shadow="never" :body-style="{ border: 0 ,padding:'0px 20px'}">
        <el-form ref="searchform" :inline="true" :model="query" class="demo-form-inline" size="small">
          <el-form-item label="年：">
            <el-date-picker placeholder="选择年份" v-model="query.year" size="mediumn" value-format="yyyy" type="year"
              style="margin-right:20px">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="月：">
            <el-select v-model="query.month" placeholder="请选择" size="medium" style="margin-right:20px">
              <el-option label="一月" value="1"></el-option>
              <el-option label="二月" value="2"></el-option>
              <el-option label="三月" value="3"></el-option>
              <el-option label="四月" value="4"></el-option>
              <el-option label="五月" value="5"></el-option>
              <el-option label="六月" value="6"></el-option>
              <el-option label="七月" value="7"></el-option>
              <el-option label="八月" value="8"></el-option>
              <el-option label="九月" value="9"></el-option>
              <el-option label="十月" value="10"></el-option>
              <el-option label="十一月" value="11"></el-option>
              <el-option label="十二月" value="12"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mediumn" @click="handleSearch()">查询</el-button>
            <el-button type="default" size="mediumn" @click="handleClean()">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div style="margin:0 20px">
      <div class="filter-select">
        <el-row>
          <el-col :span="3"> <span class="bd6"></span>
            <h2 class="ft22">核查状态：</h2>
          </el-col>
          <el-col :span="17" class="present-tabs">
            <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-bottom:0">
              <el-tab-pane label="全部" name="3"></el-tab-pane>
              <el-tab-pane label="处理中" name="0"></el-tab-pane>
              <el-tab-pane label="已通过" name="1"></el-tab-pane>
              <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
            </el-tabs>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" icon="el-icon-plus" size="medium" @click="ShowEditOrViewDialog()"
              v-if="level == 1">上报数据</el-button>

          </el-col>
        </el-row>
      </div>
    </div>
    <el-card shadow="never" :body-style="{ border: 0,padding: '0 20px'}">
      <el-table ref="gridtable" v-loading="tableloading" :data="tableData" border stripe show-header
        highlight-current-row style="width: 100%" :default-sort="{ prop: 'SortCode', order: 'ascending' }"
        @select="handleSelectChange" @select-all="handleSelectAllChange" @sort-change="handleSortChange">
        <!-- <el-table-column type="selection" width="50" /> -->
        <!-- <el-table-column prop="account" label="账号" sortable="custom" width="120" /> -->
        <!-- <el-table-column prop="id" label="ID" /> -->
        <el-table-column prop="taskId" align="center" label="呈报编码" />

        <el-table-column prop="taskId" align="center" width="270" label="呈报周期 | 名称">
          <template slot-scope="scope">
            <div>{{scope.row.timeNo}}</div>
            <div>{{scope.row.taskName}}</div>
          </template>>
        </el-table-column>
        <el-table-column v-if="level == 0 || level == 1" prop="upCompanyName" align="center" label="上报单位" />
        <el-table-column v-if="level == 2" prop="communityName" align="center" label="上报单位" />
        <el-table-column v-if="level == 0 || level == 1" prop="upName" align="center" label="呈报人" />
        <el-table-column v-if="level == 2" prop="upCommunityName" align="center" label="呈报人" />
        <el-table-column prop="createdTime" align="center" label="创建时间" />
        <el-table-column prop="taskType" align="center" label="呈报类别">
          <template slot-scope="scope">
            <el-tag v-show="scope.row.taskType == 1" type="success">季报</el-tag>
            <el-tag v-show="scope.row.taskType == 0" type="danger">月报</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="username" align="center" label="上期呈报总人数" /> -->
        <el-table-column prop="perNumber" align="center" label="本期人数" />
        <el-table-column prop="username" align="center" label="状态|详情">
          <template slot-scope="scope">
            <el-button type="text" @click="setStatus(scope,'1')" v-if="scope.row.processStatus == 0">
              待审核
            </el-button>
            <el-button type="text" style="color: #1BB358" @click="setStatus(scope,'2')"
              v-if="scope.row.processStatus == 1">通过
            </el-button>
            <el-button type="text" style="color: red" @click="setStatus(scope,'-1')"
              v-if="scope.row.processStatus == 2">拒绝
            </el-button>
            <el-button type="text" style="color: red" @click="handleEditDataFrom(this,scope.row)">详情
            </el-button>
          </template>
        </el-table-column>

      </el-table>
      <div class="pagination-container">
        <el-pagination background :current-page="pagination.currentPage"
          :page-sizes="[5, 10, 20, 50, 100, 200, 300, 400]" :page-size="pagination.pagesize"
          layout="total, sizes, prev, pager, next, jumper" :total="pagination.pageTotal" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </el-card>

    <el-dialog title="上报数据" :visible.sync="jdShow" width="500px" :before-close="handleClose">
      <div align="center">
        <el-table ref="gridtable" size="medium" :data="shangbaoData" border stripe show-header highlight-current-row
          style="width: 100%" @current-change="clickChange" :default-sort="{ prop: 'SortCode', order: 'ascending' }"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="taskId" align="center" label="呈报编码" />
          <el-table-column prop="taskName" align="center" label="名称" />
          <el-table-column prop="remarks" align="center" label="备注" />

        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="exportExcel()">下载呈报</el-button>
        <el-button @click="jdShow = false">取 消</el-button>
        <el-button type="primary" @click="saveEditForm()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import {
    getJdPostData,
    getJdMzPostData,
    getMzPostData,
    getSqPostData,
    exportExc
  } from '../../../api/present';
  import {
    taskInfo,
    jdShangbao
  } from '../../../api/verification';
  var queryRequest = {
    url: "/verfication/task/page-list"
  };
  export default {
    name: 'digitalcertificate', // 需与菜单的功能编码一致
    data() {
      return {
        query: {
          // areaId: 0,
          pageNum: 1,
          month: "",
          pageSize: 10,
          ascs: [],
          year: '',
          descs: ['createdTime']
        },
        tableData: [],
        tableloading: true,
        pagination: {
          currentPage: 1,
          pagesize: 20,
          pageTotal: 0
        },
        activeName: '3',
        dialogEditFormVisible: false,
        editFormTitle: '',
        editFrom: {},
        rules: {},
        formLabelWidth: '80px',
        currentId: '', // 当前操作对象的ID值，主要用于修改
        currentSelected: [],
        depData: [],
        level: '',
        startTime: '',
        endTime: '',
        upActive: 0,
        jdShow: false,
        shangbaoData: [],
        tableRadio: []
      }
    },
    created() {
      queryRequest.data = this.query
      this.level = localStorage.getItem('level')
      this.getData()
    },
    methods: {
      exportExcel() {
        if (this.tableRadio == '') {
          this.$message.error('请选择数据!')
          return false
        }
        exportExc(this.tableRadio).then(res => {
          let data = res
          if (!data) {
            return
          }

          let url = window.URL.createObjectURL(new Blob([data]))
          let a = document.createElement('a')
          a.style.display = 'none'
          a.href = url
          a.setAttribute('download', '呈报数据.xls')
          document.body.appendChild(a)
          a.click() //执行下载
          window.URL.revokeObjectURL(a.href)
          document.body.removeChild(a)
          this.$message.success('导出成功!')
        });

      },
      handleSelectionChange(val) {
        const allValues = [];
        // 保留所有值
        for (const item of val) {
          allValues.push(item.taskId)
        }
        console.log(allValues)
        this.tableRadio = allValues
      },
      clickChange(item) {
        this.tableRadio = item.taskId
      },
      handleClose(done) {
        done();
      },
      handleClickUp() {
        this.query.status = this.query.status == 3 ? this.query.status : ''
        this.getData()
      },
      handleClick() {
        this.query.status = this.activeName == 3 ? '' : this.activeName
        this.getData()
      },
      // 获取数据
      getData() {
        //获取居民列表0-民政 1-街道 2-社区
        if (this.level == 0) {
          getMzPostData(queryRequest).then(res => {
            this.tableloading = false
            this.tableData = res.data.list;
            this.pagination.pageTotal = res.data.total || 50;
          });

        } else if (this.level == 1) {
          if (this.upActive == 0) {
            getJdPostData(queryRequest).then(res => {
              this.tableloading = false
              this.tableData = res.data.list;
              this.pagination.pageTotal = res.data.total || 50;
            });
          } else {
            getJdMzPostData(queryRequest).then(res => {
              this.tableloading = false
              this.tableData = res.data.list;
              this.pagination.pageTotal = res.data.total || 50;
            });
          }
        } else {
          getSqPostData(queryRequest).then(res => {
            this.tableloading = false
            this.tableData = res.data.list;
            this.pagination.pageTotal = res.data.total || 50;
          });
        }
      },
      /**
       * 初始化数据
       */
      InitDictItem() {

      },

      // 取消按钮
      cancel() {
        this.dialogEditFormVisible = false
        this.reset()
      },
      // 表单重置
      reset() {

      },

      handleClean: function () {
        this.query = {
          pageNum: 1,
          month: "",
          pageSize: 10,
          ascs: [],
          year: '',
          descs: []
        }
        queryRequest.data = this.query
        this.getData()
      },

      /**
       * 点击查询
       */
      handleSearch: function () {
        this.pagination.currentPage = 1
        this.getData()
      },

      /**
       * 新增/修改保存
       */
      saveEditForm() {

        jdShangbao(this.tableRadio).then(res => {
          this.$message({
            message: res.message,
            type: 'success'
          })
          if(res.code !== -1){
            this.jdShow = false
          }
        });

      },
      /**
       * 新增、修改或查看明细信息（绑定显示数据）     *
       */
      ShowEditOrViewDialog: function (view) {
        //0-民政 1-街道 2-社区
        if (this.query.year == '' || this.query.month == '') {
          this.$message({
            message: '请时间筛选',
            type: 'error'
          })
          return false
        }
        let op = ''
        if (this.query.month == 'A') {
          op = '第一季度'
        } else if (this.query.month == 'B') {
          op = '第二季度'
        } else if (this.query.month == 'C') {
          op = '第三季度'
        } else if (this.query.month == 'D') {
          op = '第四季度'
        } else {
          op = '-' + this.query.month + '月'
        }

        this.jdShow = true
        taskInfo({
          year: this.query.year,
          month: this.query.month
        }).then((res) => {
          this.shangbaoData = res.data
        })

      },
      bindEditInfo: function () {
        getSys_userDetail(this.currentId).then((res) => {
          this.editFrom = res.data
          // 需个性化处理内容
        })
      },

      setEnable: function (val) {
        if (this.currentSelected.length === 0) {
          this.$alert('请先选择要操作的数据', '提示')
          return false
        } else {
          var currentIds = []
          this.currentSelected.forEach((element) => {
            currentIds.push(element.Id)
          })
          const data = {
            Ids: currentIds,
            Flag: val
          }
          setSys_userEnable(data).then((res) => {
            if (res.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.currentSelected = ''
              this.getData()
            } else {
              this.$message({
                message: res.message,
                type: 'error'
              })
            }
          })
        }
      },
      deleteSoft: function (val) {
        if (this.currentSelected.length === 0) {
          this.$alert('请先选择要操作的数据', '提示')
          return false
        } else {
          const that = this
          this.$confirm('是否确认删除所选的数据项?', '警告', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
            .then(function () {
              var currentIds = []
              that.currentSelected.forEach((element) => {
                currentIds.push(element.Id)
              })
              const data = {
                Ids: currentIds,
                Flag: val
              }
              return deleteSoftSys_user(data)
            })
            .then((res) => {
              if (res.code === 200) {
                that.$message({
                  message: '删除成功',
                  type: 'success'
                })
                that.currentSelected = ''
                that.getData()
              } else {
                this.$message({
                  message: res.message,
                  type: 'error'
                })
              }
            })
        }
      },
      deletePhysics: function () {
        if (this.currentSelected.length === 0) {
          this.$alert('请先选择要操作的数据', '提示')
          return false
        } else {
          const that = this
          this.$confirm('是否确认删除所选的数据项?', '警告', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
            .then(function () {
              var currentIds = []
              that.currentSelected.forEach((element) => {
                currentIds.push(element.Id)
              })
              const data = {
                Ids: currentIds
              }
              return deleteSys_user(data)
            })
            .then((res) => {
              if (res.code === 200) {
                that.$message({
                  message: '删除成功',
                  type: 'success'
                })
                that.currentSelected = ''
                that.getData()
              } else {
                this.$message({
                  message: res.message,
                  type: 'error'
                })
              }
            })
        }
      },
      /**
       * 当表格的排序条件发生变化的时候会触发该事件
       */
      handleSortChange: function (column) {
        this.sortableData.sort = column.prop
        if (column.order === 'ascending') {
          this.sortableData.order = 'asc'
        } else {
          this.sortableData.order = 'desc'
        }
        this.getData()
      },
      /**
       * 当用户手动勾选checkbox数据行事件
       */
      handleSelectChange: function (selection, row) {
        this.currentSelected = selection
      },
      /**
       * 当用户手动勾选全选checkbox事件
       */
      handleSelectAllChange: function (selection) {
        this.currentSelected = selection
      },
      /**
       * 选择每页显示数量
       */
      handleSizeChange(val) {
        this.query.pageSize = val
        this.query.currentPage = 1
        this.getData()
      },
      /**
       * 选择当页面
       */
      handleCurrentChange(val) {
        this.query.pageNum = val
        this.getData()
      },
      handleEditDataFrom(view, row) {
        this.currentId = row.taskId
        this.$router.push({
          name: 'ViewPresent',
          params: {
            id: this.currentId,
            showtype: view
          }
        })

      }
    }
  }
</script>

<style lang="scss" scoped>
  .app-container {
    background-color: #fcf9fc;
  }

  .el-card {
    border: 0;
    background-color: #fcf9fc;
    box-shadow: 0 !important;
  }

  .el-table {
    border-radius: 10px;
  }

  .ft22 {
    font-size: 22px;
    font-weight: normal;
    padding-left: 15px;
    margin-top: 5px;
    float: left;
  }

  .bd6 {
    display: block;
    width: 6px;
    height: 16px;
    float: left;
    background-color: #4940FD;
    margin-top: 13px;

  }

  .el-button {
    border-radius: 10px;
  }

  .dc-chart .el-card {
    background-color: #ffffff;
  }
  .el-tabs__header{
    margin-bottom: 0;
  }
</style>